由於我們即將要來介紹如何透過susy2來設計responsive grid，
在那之前我想先花一章篇幅來講一下breakpoint這個framework，
因為susy2的responsive mixin是透過他來設計的，
所以有必要了解一下他的原理，
你才知道該如何透過他來設計你想要的grid出來。
##youtube影片教學
##範例程式碼
我們先到Breakpoint的官網，
其中一個範例如下：
$high-tide: 500px;
.johnny-utah {
@include breakpoint($high-tide) {
content: 'Whoa.';
}
}
//編譯出的CSS
@media (min-width: 500px) {
.johnny-utah {
content: 'Whoa.';
}
}
Breakpoint就是一個Mixin，
他可以讓你透過設定變數，
再藉由他的Mixin來編譯出media Queries 語法，
所以如果你有幾個斷點，
就設計幾個變數，
Breakpoint預設是mobile first的設定，
所以你可以看他編譯出來是min-width: 500px
也就是先從手機開始做起，
如果你今天要設計一個mobile first的responsive網站的話，
其設計方式如下：
$pad: 569px;
$pc: 1024px;
.container{
width:300px;
height:300px;
margin: 0 auto;
background: orange;
@include breakpoint($pad){
background: black;
}
@include breakpoint($pc){
background: blue;
}
}
首先我一開始寫的設定自然就是先撰寫手機的CSS設定，
再來當螢幕解析大於569px後，
就開啟該media Queries的設定，
當有兩個class設定一樣時，
後面的程式碼會覆蓋掉前面的設定，
藉由這樣的方式來設計響應式網站，
所以如果是做mobile first網站，
你就可以看出你的數值一定是從小慢慢慢變大，
再一一去覆蓋。
而假使你要設計的responsive網頁版型是desktop first的話，
那就必須用max-width的設定。
如果是用Breakpoint的話，
變數設定則會是：
$pad2: max-width 767px;
.conetent{
width:100px;
@include breakpoint($pad2){
width:200px;
}
}
//編譯出來的CSS
.conetent {
width: 100px;
}
@media (max-width: 767px) {
.conetent {
width: 200px;
}
}
假使你的斷點是介於多少到多少之間的話，
變數則是設定$mobile: 600px 800px;，
這樣編譯出來就會變成@media (min-width: 600px) and (max-width: 800px) {}。
看到這裡，
你就已經曉得Breakpoint主要是拿來協助我們寫RWD斷點的Mixin，
所以susy2 的 RWD Mixin也有結合他的東西來設計。
如果你設計的網頁版型不想用類似susy2 的framework，
也可以考慮看看單純使用Breakpoint的Breakpoint的工具，
要設計幾個斷線就設計幾個變數即可，
透過變數來進行統一管理也非常方便嘍。